<template>
    <view>
        <view class="bg"></view>
        
        <view class="content">
            <view class="box">
                <view class="info-box" @click="$gTo(`/mine/pages/child-info/child-info?from=${'settle'}`)">
                    <view class="info" v-if="child && child.name">
                        <image :src="IMAGEURL + 'static/icon/icon_01.png'" class="icon-01"></image>
                        <view class="name">{{ child.name }}</view>
                        <view class="male" v-if="child.gender == 1">男</view>
                        <view class="female" v-if="child.gender == 2">女</view>
                        <view class="age">{{ child.age }}岁</view>
                    </view>
                    <view class="info" v-else>
                        <image :src="IMAGEURL + 'static/icon/icon_01.png'" class="icon-01"></image>
                        <view class="name">请选择~~</view>
                    </view>
                    <u-icon name="arrow-right" color="#6d6d6d" size="28"></u-icon>
                </view>
                <view class="add">
                    <view class="add-t">服务目的地</view>
                    <view class="add-d" @click="$gTo(`/mine/pages/address/address`)">
                        <view class="u-p-r-15 u-flex-1" v-if="data.address">{{data.address}}</view>
                        <view class="u-p-r-15 u-flex-1" v-else-if="address&&address.address">{{address.address}}</view>
                        <view class="u-p-r-15 u-flex-1" v-else>请选择~~</view>
                        <u-icon name="arrow-right" color="#6d6d6d" size="28"></u-icon>
                    </view>
                </view>
            </view>
            <view class="box">
                <view class="item">
                    <image :src="data.items_image" class="img"></image>
                    <view class="item-r">
                        <!-- <view class="cate">伙伴计时</view> -->
                        <view>
                            <text class="cate-t">{{data.items}}</text>
                            <!-- <text class="subject">数学</text> -->
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view class="u-p-r-15">服务选择</view>
                    <view>{{data.service}}</view>
                </view>
                <view class="item2">
                    <view class="u-p-r-15">服务时间</view>
                    <view class="times">
                        <text class="u-p-b-10" v-if="data.type == 2">{{data.cycle}}周</text>
                        <view v-for="(item, index) in data.data" :key="item.date">
                            <text v-if="data.type == 1">
                                {{item.date}}({{ item.week }}) {{ item.start_time }}-{{ item.end_time }}
                            </text>
                            <text v-if="data.type == 2">
                                {{ item.week }} {{ item.start_time }}-{{ item.end_time }}
                            </text>
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view class="u-p-r-15">价格</view>
                    <view class="price">￥<text>{{data.price}}</text></view>
                </view>
                <view class="item" v-if="data.coupon_count > 0" 
                    @click="$gTo(`/mine/pages/coupon/choose-coupon?money=${data.order_amount}`)">
                    <view class="u-p-r-15 u-flex">
                        <view class="cou-icon">券</view>
                        <view>平台优惠券</view>
                    </view>
                    <view class="u-flex">
                        <!-- <view class="price">￥<text>10</text></view> -->
                        <view class="coupon-num">{{ data.coupon_count }}张可用</view>
                        <u-icon name="arrow-right" color="#bcbcbd" size="28"></u-icon>
                    </view>
                </view>
                <view class="total">
                    <view v-if="coupon && coupon.money > 0">
                        优惠<text class="money">￥{{ coupon.money }}</text>
                    </view>
                    <view class="u-p-l-30">
                        合计 ￥<text class="money-t">{{ money }}</text>
                    </view>
                </view>
            </view>
            
            <view class="box">
                <view class="u-flex u-row-between u-col-center u-p-t-30 u-p-b-30">
                    <view class="title">
                        <image :src="IMAGEURL + 'static/icon/icon_02.png'" class="icon-02"></image>
                        <view class="title-text">备注</view>
                    </view>
                    <view class="bz-btn" @click="$gTo(`/mine/pages/settlement/remarks`)">添加</view>
                </view>
                <view class="notes" v-if="remark">{{ remark }}</view>
            </view>
            
            <view class="box u-p-b-30">
                <view class="ser-tit">
                    <view class="u-flex">
                        <image :src="IMAGEURL + 'static/icon/icon_03.png'" class="icon-03"></image>
                        <view class="title-text">选择陪伴师</view>
                    </view>
                </view>
                
                <template v-if="data.service_staff.length > 0">
                    <view class="teacher" :class="{teacherActive : item.isSelect}"
                        v-for="(item, index) in data.service_staff" :key="index" @click="chooseStaff(item)">
                        <view class="teacher-check" v-if="item.isSelect">
                            <u-icon name="checkbox-mark" color="#000" size="28"></u-icon>
                        </view>
                        <image :src="item.image" class="avatar"></image>
                        <view class="u-flex-1">
                            <view class="u-flex u-row-between">
                                <view class="teacher-r-t">
                                    <view class="teacher-name">{{item.name}}</view>
                                    <view class="real">已实名</view>
                                    <u-rate :count="item.star" v-model="item.star" active-color="#fec427" size="26" gutter="5" disabled></u-rate>
                                    <!-- <u-icon name="star-fill" color="#fec427" size="28"></u-icon> -->
                                    <!-- <view class="star-num">{{item.star}}</view> -->
                                </view>
                                <view @click.stop="$gTo(`/mine/pages/service/service-details?id=${item.id}&fromSettlement=${1}`)">
                                    查看
                                    <u-icon name="arrow-right" size="28"></u-icon>
                                </view>
                            </view>
                            <view class="great">擅长：{{item.be_good_at}}</view>
                        </view>
                    </view>
                </template>
                
                <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="data.service_staff.length == 0">暂无符合条件的陪伴师</view>
            </view>
            
            <view class="footer">
                <view>
                    <view class="footer-left">
                        <view>订单总额</view>
                        <view class="footer-total">
                            ￥<text class="footer-total-num">{{ money }}</text>
                        </view>
                    </view>
                </view>
                <view class="btn1" v-if="data.service_staff.length > 0 || userId" @click="$noMultipleClicks(addOrder)">立即预约</view>
                <view class="btn1 btn4" v-if="data.service_staff.length == 0 && !userId">没有可选的陪伴师，不能预约</view>
            </view>
        </view>
        
        <!-- 确认下单弹窗 -->
        <u-popup v-model="show" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
            <view class="pop-box-cou">
                <view class="pop-title">确认下单</view>
                <view>
                    <!-- <view class="pop-title-sub">服务协议标题</view> -->
                    <scroll-view :scroll-y="true" style="height: 600rpx;">
                        <view class="pop-text">
                            <u-parse :html="content"></u-parse>
                        </view>
                    </scroll-view>
                </view>
                <view class="flex align-top u-p-t-25 u-p-b-40 border-t" @click="agree">
                    <view class="frame" :class="{activeIcon : act}">
                        <u-icon name="checkbox-mark" color="#682604" size="30" v-if="act"></u-icon>
                    </view>
                    <view class="login-tip">
                        我已阅读并同意
                        <text class="tip" @click.stop="$gTo('/mine/pages/other/user-agreement')">《用户协议》</text>
                        和
                        <text class="tip" @click.stop="$gTo('/mine/pages/other/user-privacy')">《隐私政策》</text>
                    </view>
                </view>
                
                <view class="pop-btns">
                    <view class="pop-btn1" @click="show = false">我再想想</view>
                    <view class="pop-btn2" @click="confirm">确认预约</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                IMAGEURL,
                noClick:true,//连点
                show: false,
                content: '',//服务协议
                act: false,
                data: {},
                money: 0,//合计
                coupon: {},//优惠券
                remark: '',//备注
                address: {},
                child: {},
                sId: '',//服务id
                sType: '',//服务类型
                itId: '',//服务项目id 二级规格
                puId: '',//公司宣传id
                payInfo: {},
                userId: '',//陪伴师id
            };
        },
        onLoad(option) {
            if (option.data) {
                this.data = JSON.parse(decodeURIComponent(option.data));
                this.data.service_staff.forEach((cur, index) => {
                    if (index == 0) {
                        this.$set(cur, 'isSelect', true)
                    } else {
                        this.$set(cur, 'isSelect', false)
                    }
                })
                this.money = this.data.order_amount
                console.log(this.data)
            }
            if(option.userId) {
                this.userId = option.userId
            }
            if(option.sId) {
                this.sId = option.sId
            }
            if(option.sType) {
                this.sType = option.sType
            }
            if(option.itId) {
                this.itId = option.itId
            }
            if(option.puId) {
                this.puId = option.puId
            }
            // 接收选择优惠券监听
            uni.$on('ChooseCoupon', (data)=>{
            	this.coupon = data;
                this.money = this.data.order_amount - this.coupon.money
            })
            
            // 接收备注监听
            uni.$on('remark', (data)=>{
            	this.remark = data;
            })
            
            // 接收选择孩子监听
            uni.$on('CHILD', (data)=>{
            	this.child = data;
            })
            
            this.getRule()
        },
        onShow() {
        	this.getAddress()
        },
        methods: {
            // 确认预约，跳支付
            confirm() {
                if (!this.act) {
                    this.$toast('请先同意用户协议和隐私政策');
                    return false;
                }
                this.show = false
                const newData = JSON.stringify(this.payInfo)
                this.$gTo(`/mine/pages/pay/pay?data=${encodeURIComponent(newData)}`)
            },
            
            // 立即预约
            addOrder() {
                this.data.service_staff.forEach(ii => {
                    if (ii.isSelect) {
                        this.userId = ii.id
                    }
                })
                if (!this.userId) {
                    this.$toast('请选择陪伴师')
                    return
                }
                if (!this.child.id) {
                    this.$toast('请选择孩子')
                    return
                }
                if (!this.address.id && !this.data.address_id) {
                    this.$toast('请选择服务目的地')
                    return
                }
                console.log({
                    user_token: this.$getSync('userToken'),
                    service_id: this.sId,//服务类型 1伙伴计划 2伙伴定制服务 3伙伴+ 4家庭教育课堂
                    service_type: this.sType,//服务类型 1伙伴计划 2热门服务1 3热门服务2 4公司宣传
                    items2_id: this.itId,//服务二级规格id
                    publicize_id: this.puId,//公司宣传id
                    user_id: this.userId,//陪伴师id
                    type: this.data.type,//1单次 2周期
                    cycle: this.data.type == 2 ? this.data.cycle : '',//周期 几周
                    child_id: this.child.id,//孩子id
                    address_id: this.address.id || this.data.address_id,//地址id
                    remark: this.remark,//备注
                    coupon_id: this.coupon.id || '',//优惠券id
                    data: this.data.data,
                })
                // return
                this.$ajax('submit_order', {
                    user_token: this.$getSync('userToken'),
                    service_id: this.sId,//服务类型 1伙伴计划 2伙伴定制服务 3伙伴+ 4家庭教育课堂
                    service_type: this.sType,//服务类型 1伙伴计划 2热门服务1 3热门服务2 4公司宣传
                    items2_id: this.itId,//服务二级规格id
                    publicize_id: this.puId,//公司宣传id
                    user_id: this.userId,//陪伴师id
                    type: this.data.type,//1单次 2周期
                    cycle: this.data.type == 2 ? this.data.cycle : '',//周期 几周
                    child_id: this.child.id,//孩子id
                    address_id: this.address.id || this.data.address_id,//地址id
                    remark: this.remark,//备注
                    coupon_id: this.coupon.id || '',//优惠券id
                    data: this.data.data,//数组	"data":[{"week_id":"3","week":"周三","date":"2023-12-13","start_time":"10:00","end_time":"12:00"}]
                }).then(ret => { 		
                    if (ret.success == 1000) {
                        this.payInfo = ret.detail
                        this.show = true
                    } else {
                    	this.$toast(ret.msg);
                    }
                })
            },
            
            // 选择陪伴师
            chooseStaff(item) {
                if (!this.userId) {
                    const nowStatu = item.isSelect
                    this.data.service_staff.forEach(ii => {
                        ii.isSelect = false;
                    })
                    item.isSelect =! nowStatu
                }
            },
            
            // 获取地址列表
            getAddress() {
                this.$ajax('user_address', {
                    user_token: this.$getSync('userToken'),
                }).then(ret => { 		
                    if (ret.success == 1000) {
                        ret.detail.forEach(cur => {
                            if (cur.is_default == 1) {
                                this.address = cur
                            }
                        })
                    } else {
                    	this.$toast(ret.msg);
                    }
                })
            },
            
            agree() {
                this.act = !this.act
                console.log('act',this.act)
            },
            
            getRule() {
            	this.$ajax('select_rules', {
                    type: 3,//1平台介绍 2隐私政策 3服务协议 4用户协议 5充值说明 6保险授权委托书 7伙伴授权委托书 8伙伴通讯委托书 9电子合同授权书 10背调授权书
            	}).then(ret => {
            		this.content = ret.detail.rules
            	});
            },
        }
    };
</script>

<style>
    page{
        background-color: #f5f5f5;
    }
</style>

<style lang="scss">
    
    .pop-box-cou{
        padding: 0 20rpx;
    }
    .pop-title{
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        padding: 30rpx 20rpx 0;
    }
    .pop-title-sub{
        font-size: 30rpx;
        font-weight: bold;
        padding: 40rpx 0 20rpx;
    }
    .pop-text{
        font-size: 26rpx;
        color: #949494;
        line-height: 1.5;
    }
    .border-t{
        border-top: 2rpx solid #eee;
    }
    .frame {
        width: 33rpx;
        height: 33rpx;
        border-radius: 10%;
        border: 2rpx solid #cdcdcd;
        position: relative;
        margin-right: 12rpx;
        margin-top: 4rpx;
    
        // /deep/ 
        u-icon {
            transform: scale(0);
            position: absolute;
            top: -7%;
            left: -2%;
        }
    }
    
    .activeIcon {
        background-color: #ffda65;
        border: none;
        
        // /deep/ 
        u-icon {
            transform: scale(1);
        }
    }
    .login-tip{
        font-size: 26rpx;
        color: #9c9c9c;
    }
    .tip{
        color: #ff8103;
    }
    .pop-btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .pop-btns>view{
        width: calc(680rpx / 2);
        height: 85rpx;
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        line-height: 85rpx;
        border-radius: 15rpx;
    }
    .pop-btn1{
        background-color: #1d2129;
    }
    .pop-btn2{
        background-color: #f29700;
    }
    
    
    .bg {
    	width: 100%;
    	height: 390rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    	background: linear-gradient(to bottom, #f29700, #f5f5f5);
    }
    
    .content{
        padding: 0 20rpx 200rpx;
    }
    .header{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 30rpx;
    }
    .header>view{
        padding-left: 10rpx;
        font-size: 40rpx;
        font-weight: bold;
        line-height: 1;
    }
    
    .box{
        padding: 0 25rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .info-box{
        padding-top: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .info{
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-right: 15rpx;
    }
    .icon-01{
        width: 37rpx;
        height: 37rpx;
        margin-right: 15rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        padding-right: 15rpx;
    }
    .male{
        width: 34rpx;
        height: 34rpx;
        border-radius: 5rpx;
        background-color: #edf6ff;
        font-size: 26rpx;
        color: #2d96fa;
        text-align: center;
        line-height: 34rpx;
    }
    .female{
        width: 34rpx;
        height: 34rpx;
        border-radius: 5rpx;
        background-color: #ffeeed;
        font-size: 26rpx;
        color: #ff5748;
        text-align: center;
        line-height: 34rpx;
    }
    .age{
        font-size: 26rpx;
        color: #727272;
        padding-left: 15rpx;
    }
    .add{
        padding-top: 20rpx;
        padding-bottom: 30rpx;
    }
    .add-t{
        font-size: 24rpx;
        color: #727272;
    }
    .add-d{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
        padding-top: 6rpx;
    }
    
    
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30rpx;
    }
    .item2{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 30rpx;
    }
    .img{
        width: 112rpx;
        height: 112rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .item-r{
        flex: 1;
    }
    .cate{
        font-size: 28rpx;
        padding-bottom: 10rpx;
    }
    .item-d{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cate-t{
        font-size: 32rpx;
        font-weight: bold;
    }
    .subject{
        font-size: 26rpx;
        padding-left: 10rpx;
    }
    .num{
        font-size: 26rpx;
        color: #ff4a26;
        padding-left: 10rpx;
    }
    .times{
        text-align: right;
    }
    .times>view{
        padding-top: 10rpx;
    }
    .times>view:first-child{
        padding-top: 0;
    }
    .price{
        font-size: 26rpx;
        color: #ff4a26;
    }
    .price>text{
        font-size: 38rpx;
    }
    .coupon-num{
        background-color: #ff4a26;
        border-radius: 8rpx;
        font-size: 22rpx;
        color: #fff;
        padding: 6rpx 10rpx;
        margin-right: 8rpx;
    }
    .cou-icon{
        width: 32rpx;
        height: 32rpx;
        background-color: #ff4a26;
        border-radius: 8rpx;
        font-size: 22rpx;
        color: #fff;
        line-height: 32rpx;
        text-align: center;
        margin-right: 8rpx;
    }
    .total{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 30rpx 0;
        border-top: 2rpx solid #eee;
        margin-top: 30rpx;
    }
    .money{
        color: #ff4a26;
    }
    .money-t{
        font-size: 42rpx;
    }
    .line-kf{
        padding: 20rpx 0 30rpx;
        border-top: 2rpx solid #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #444;
    }
    .tel-03{
        width: 36rpx;
        height: 30rpx;
        margin-right: 10rpx;
    }
    
    .ser-tit{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
    }
    .btn-call{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 25rpx;
        background-color: #a2a8b8;
        border-radius: 50rpx;
    }
    .btn-more{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 25rpx;
        background-color: #f29700;
        border-radius: 15rpx;
    }
    .icon-03{
        width: 29rpx;
        height: 33rpx;
    }
    .icon-16{
        width: 31rpx;
        height: 31rpx;
    }
    .title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        // padding: 30rpx 0;
    }
    .bz-btn{
        padding: 12rpx 35rpx;
        background-color: #f29700;
        border-radius: 8rpx;
        font-size: 26rpx;
        color: #fff;
    }
    .title-text{
        font-size: 30rpx;
        font-weight: bold;
        padding-left: 12rpx;
    }
    .icon-02{
        width: 27rpx;
        height: 32rpx;
    }
    .lay{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 30rpx;
    }
    .lay>view{
        width: calc(100vw / 2);
    }
    .notes{
        font-size: 24rpx;
        word-break: break-all;
        white-space: pre-line;
        padding-bottom: 30rpx;
    }
    
    
    .teacher{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 20rpx;
        border-radius: 20rpx;
        position: relative;
        margin-bottom: 20rpx;
    }
    .teacherActive{
        border: 2rpx solid #ffd048;
    }
    .teacher-check{
        width: 44rpx;
        height: 33rpx;
        background-color: #ffd048;
        text-align: center;
        line-height: 33rpx;
        border-radius: 20rpx 0 20rpx 0;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .avatar{
        width: 95rpx;
        height: 95rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }
    .teacher-r-t{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .teacher-name{
        // max-width: 335rpx;
        max-width: 180rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 32rpx;
        font-weight: bold;
    }
    .real{
        padding: 7rpx 8rpx;
        background-color: #000;
        border-radius: 6rpx;
        font-size: 20rpx;
        color: #feeca8;
        line-height: 1;
        margin: 0 10rpx;
    }
    .star-num{
        font-size: 28rpx;
        font-weight: bold;
        padding-left: 6rpx;
    }
    .great{
        font-size: 24rpx;
        color: #949494;
        padding-top: 10rpx;
        width: 500rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .teacher-btn{
        padding-top: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .teacher-btn>view{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15rpx 90rpx;
        border-radius: 50rpx;
        background-color: #f5f6f8;
        font-size: 26rpx;
    }
    .icon-04{
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
    }
    .add-icon{
        width: 24rpx;
        height: 29rpx;
        margin-right: 10rpx;
    }
    .rate-top{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .rate-down{
        padding-top: 20rpx;
        font-size: 26rpx;
    }
    .rate-down>text{
        color: #949494;
        word-break: break-all;
        white-space: pre-line;
    }
    
    
    .list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;
        padding-bottom: 25rpx;
    }
    .list-r{
        flex: 1;
        padding-left: 25rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .order-no{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .copy{
        width: 90rpx;
        height: 42rpx;
        font-size: 22rpx;
        border: 2rpx solid #d1d1d1;
        border-radius: 50rpx;
        text-align: center;
        line-height: 42rpx;
        margin-left: 15rpx;
    }
    
    .study{
        font-size: 24rpx;
        color: #808aa5;
        line-height: 1.5;
        padding-bottom: 30rpx;
    }
    .study-note{
        padding-top: 10rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    .img-box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
    }
    .study-img{
        width: 194rpx;
        height: 194rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    
    
    .footer{
        width: 100vw;
        height: 105rpx;
        background-color: #fff;
        padding: 0 25rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .footer-left{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
    }
    .footer-total{
        font-size: 26rpx;
        color: #f62a2a;
    }
    .footer-total-num{
        font-size: 42rpx;
        color: #f62a2a;
    }
    .btn1{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 55rpx;
        background-color: #f29700;
        border-radius: 10rpx;
        margin-left: 20rpx;
    }
    .btn4{
        font-size: 26rpx;
        padding: 15rpx 10rpx;
        background-color: #d4d2ce;
    }
    .btn2{
        border: 2rpx solid #eeeeee;
    }
    .btn3{
        background-color: #fffcf8;
        border: 2rpx solid #f29700;
    }

</style>
